<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dialog</title>
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css">
    <!--
      TDesign 图标库，桌面端与移动端用同样的资源
      使用方式：<i class="t-icon t-icon-delete"></i>
    -->
    <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">
</head>
<body>
  <div class="tdesign-demo-wrap tdesign-demo-dialog">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Dialog 对话框</h1>
      <p class="tdesign-demo-wrap__info">开发者：sheepluo</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-05-30</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign Dialog 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 对话框类型 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">类型</h2>
      <p>对话框类型当前只有两种：默认类型(default)和主类型(primary)。其他类型（error/warning/info/success）暂时没有。</p>
      <p>两种状态的对话框类名分别为：t-dialog--default/t-dialog--primary。</p>
      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block tdesign-demo-block-line">
          <div class="t-dialog t-dialog--default">
            <div class="t-dialog__header">
              <h5 class='title'>我是主要信息</h5>
            </div>
            <div class="t-dialog__body">
              组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
            </div>
            <div class="t-dialog__footer">
              <button class="t-button t-button--line">取消</button>
              <button class="t-button t-button--primary">确认删除</button>
            </div>
            <span class="t-dialog__close"><i class="t-icon t-icon-close"></i></span>
          </div>
        </div>

        <div class="tdesign-demo-block tdesign-demo-block-line">
          <div class="t-dialog t-dialog--primary">
            <div class="t-dialog__header">
              <i class="t-icon t-icon-prompt_fill"></i>
              <h5 class='title'>我是主要信息</h5>
            </div>
            <div class="t-dialog__body">
              组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。在日常开发中如果没有特定的一些业务需求，使用组件库进行开发无疑是更便捷高效，而且质量也相对更高的方案。
            </div>
            <div class="t-dialog__footer">
              <button class="t-button t-button--line">取消</button>
              <button class="t-button t-button--primary">确认删除</button>
            </div>
            <span class="t-dialog__close"><i class="t-icon t-icon-close"></i></span>
          </div>
        </div>

        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 对话框状态 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">状态</h2>
      <p>对话框的状态只有加载态，而加载态仅有按钮变为加载态，其它地方不变。</p>
      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->

        <!-- tdesign-demo-block block内容容器，加了上间距 -->
        <div class="tdesign-demo-block">
          <div class="t-dialog t-dialog--default">
            <div class="t-dialog__header">
              <h5 class='title'>我是主要信息</h5>
            </div>
            <div class="t-dialog__body">
              组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
            </div>
            <div class="t-dialog__footer">
              <button class="t-button t-button--line">取消</button>
              <button class="t-button t-button--primary">
                <i class="t-icon t-icon-loading"></i>
              </button>
            </div>
            <span class="t-dialog__close"><i class="t-icon t-icon-close"></i></span>
          </div>
        </div>

        <!-- 内容区 End-->

      </div>
    </div>

    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">遮罩层</h2>
      <p>有时候对话框需要显示底部遮罩，可以将用户的注意力全部吸引到对话框。</p>
      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->

        <!-- tdesign-demo-block block内容容器，加了上间距 -->
        <div class="tdesign-demo-block tdesign-demo-block--relative">
          <div class="t-dialog__mask">
            <div class="t-dialog t-dialog--default">
              <div class="t-dialog__header">
                <h5 class='title'>我是主要信息</h5>
              </div>
              <div class="t-dialog__body">
                组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
              </div>
              <div class="t-dialog__footer">
                <button class="t-button t-button--line">取消</button>
                <button class="t-button t-button--primary">确认删除</button>
              </div>
              <span class="t-dialog__close"><i class="t-icon t-icon-close"></i></span>
            </div>
          </div>
        </div>

        <!-- 内容区 End-->

      </div>
    </div>


    <!-- 组件大小 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">大小</h2>
      <p>最大对话框宽度 960px；最小对话框宽度 480px。</p>
      <p>由于对话框宽度属于组件 API，因而此处无需 UI 开发宽度样式。</p>
      <p>当对话框宽度不在 480px ~ 960px 之间时，组件可以抛出 warning 提示。</p>
    </div>

</body>
</html>